﻿<#import "/spring.ftl" as spring/>
<#assign xhtmlCompliant = true in spring>

<#if Request.userName??>
	<#assign loginName = Request.userName />
</#if>

<head>
  <link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/default.css" />
  <link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/floatpopup.css" />   
  <!--link rel="stylesheet" type="text/css" href="styles/dashboard.css" -->
  
  <script type="text/javascript" src="${rc.contextPath}/scripts/jquery-1.4.2.min.js"></script>     
  <script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.core.min.js"></script>
  <script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.widget.min.js"></script>   
  <script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.button.js"></script>
  <script type="text/javascript" src="${rc.contextPath}/scripts/jquery.custom.select.js"></script>
  
  <script type="text/javascript" src="${rc.contextPath}/dwr/interface/UserManagerExt.js"></script>
  <script type="text/javascript" src="${rc.contextPath}/dwr/engine.js"></script>    
  <script type="text/javascript" src="${rc.contextPath}/scripts/util.js"></script> 
    
  <script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery("#log_me_in").bind('click', function(){
		  	sendLogin();
		});
		
		jQuery("#login_username").focus();
		
		jQuery("#login_username").keypress(function(event){
			keycode = (event.keyCode ? event.keyCode : event.which);
			if(keycode == '13'){
				jQuery("#login_password").focus();
			}
		});
		
		jQuery("#login_password").keypress(function(event){
			keycode = (event.keyCode ? event.keyCode : event.which);
			if(keycode == '13'){
				sendLogin();
			}
		});
		
		jQuery("#errorMsg").delay(5000).fadeOut('slow');
	});
	
	jQuery(function() {
		jQuery(".popup1 input").button();
	});
	
	function sendLogin() {
		username = jQuery("#login_username").attr("value");
		password = jQuery("#login_password").attr("value");
		remember = jQuery("#login_remember").attr("checked");
		
		if (validateLogin(username, password)) {
			//login(username, password, remember);
			$("#login_form").submit();
		}
	}
	
	function validateLogin(username, password) {
		if (username == "" || username == "tài khoản...") {
			jQuery("#errorMsg .messageContent p").html('Xin vui lòng điền tên đăng nhập');
			jQuery("#errorMsg").fadeIn('slow').delay(5000).fadeOut('slow');
			jQuery("#login_username").focus();
			return false;
		} else if (password == "mật khẩu..." || password == "") {
			jQuery("#errorMsg .messageContent p").html('Xin vui lòng điền mật khẩu');
			jQuery("#errorMsg").fadeIn('slow').delay(5000).fadeOut('slow');
			jQuery("#login_password").focus();
			return false;
		}
		return true;
	}
  </script>
  <title>Đăng nhập</title>
</head>

<div id="wallpaper">
  <div id="contentWrapper">
    <div id="content" style="position:relative" class="clearfix content contentBigPadding">
      <div id="ajaxWrapper2" class="ajaxWrapper level_2">  
               
        <!-- error message -->
        <#if RequestParameters['login_error']?exists>
			<div id="errorMsg" class="messageBox failMessage">		
		        <span class="icon_1"></span>
				<div class="messageText">
					<h1>Lỗi đăng nhập!</h1>
					<p>Bạn đăng nhập không thành công, vui lòng kiểm tra lại thông tin tài khoản và mật khẩu</p>
				</div>
			</div>
        </#if> 
        
		<div style="float:left;padding:40px;margin:0px auto;">
        <div style="float:left;">
        	<form id="login_form" action="${rc.contextPath}/j_spring_security_check" method="post" style="float:left">
				<div id="loginDialog" class="popup1">
				<div class="icon_1 lock"></div>
				<h3><@spring.message "page.login.heading"/></h3>				
				<input id="login_username" type="text" name="j_username" onblur="if(this.value == ''){this.value='tài khoản...'}"
						onfocus="if(this.value == 'tài khoản...'){this.value=''}" 
						value="<#if loginName??>${loginName}<#else>tài khoản...</#if>" />
				<input id="login_password" type="password" name="j_password" onblur="if(this.value == ''){this.value='mật khẩu...'}"
	                    onfocus="if(this.value == 'mật khẩu...'){this.value=''}" 
	                    value="mật khẩu..." />
				<div class="loginCheckControl">
					<input type="checkbox" id="login_remember" name="_spring_security_remember_me"/><label for="login_remember">Lưu mật khẩu trên máy</label>
					<span>|</span>
					<a href="forgotPassword.html">Quên mật khẩu ?</a>
					<div class="clear"></div>
				</div>
				<input id="log_me_in" type="button" value="Đăng nhập" />
			</form>
		</div>
			        
		</div>       
	        <style>
        	.loginRightMes{float:left;width:500px;padding-left:50px;color:#666;margin-left:50px;border-left:1px solid #DBDBDB}
				.loginRightMes h2{color:#666;font-size:16px}
				.loginRightMes h4{font-size:14px;font-weight:normal}
				.loginRightMes a{color:#FF6600}
			ul.loginBenefit{border-top:1px solid #DBDBDB;margin-top:10px}
			.loginBenefit  li{line-height:140%;font-size:12px;padding-top:10px;color:#666666;padding-left:15px}
			.loginBenefit span{float:left;width:8px;height:6px;background-position:-2px -43px;margin-top:15px}
      		</style>
        <div class="loginRightMes">
          <h2>Bạn đã có tài khoản iGoal chưa ? <a href="index.html">Hãy đăng ký tại đây!</a></h2>
          <h4>Chỉ mất chưa tới <b>30 giây</b> và <b>hoàn toàn miễn phí</b></h4>
          <ul class="loginBenefit">
            <span></span><li>Rất nhiều bạn bè của bạn đã chia sẻ những mục tiêu của họ ở đây. Biết đâu đó bạn có thể cùng bạn bè của mình thực hiện chung một mục tiêu nào đó.</li>
            <span></span><li>Bạn sẽ được cung cấp những giải pháp, những ý kiến chân thành để thực hiện mục tiêu của mình.</li>
            <span></span><li>Tham gia các câu lạc bộ, hội, nhóm để mở rộng, củng cố các mối quan hệ thông qua các cuộc thảo luận và họp mặt trực tiếp.</li>
            <span></span><li>Hệ thống tự động nhắc nhở bạn trong quá trình thực hiện mục tiêu.</li>
            
          </ul>
        </div>
      </div> 
	  </div>   
    </div>
  </div>
</div>
